<!DOCTYPE HTML>
<html>
<head>

    <meta charset="UTF-8">
    <meta name="robots" content="index,follow">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="description" content="A javascript class that animates a numerical value by counting to it.">

    <title>CountUp.js</title>

    <!-- <link rel="stylesheet" type="text/css" href="../inorganik.github.io/assets/css/style.css?v=20140820"> -->
    <link rel="stylesheet" type="text/css" href="../assets/css/style.css?v=20141210">

    <script type="text/javascript" src="dist/countUp.js"></script>
    <script type="text/javascript">

    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-7742845-9', 'inorganik.github.io');
    ga('send', 'pageview');

    </script>
</head>

<body>
    <a class="forkMe" href="https://github.com/inorganik/CountUp.js"><img src="../assets/img/forkme_custom_indigo.png" alt="Fork me on GitHub"></a>
    <div id="wrap">
        <header>
            <div id="github"><a class="block" href="https://github.com/inorganik"></a></div>
            <div class="leaderLine">////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</div>
            <div id="logo"><a class="block" href="http://inorganik.github.io"></a></div>
        </header>
        <section>
            <h1>CountUp.js &nbsp;<small id="version" class="lt-gray"></small></h1>
            <p>CountUp.js is a dependency-free, lightweight JavaScript "class" that can be used to quickly create animations that display numerical data in a more interesting way.</p>
            <h3 class="marginTop marginBottom"><a class="lime weight700" href="https://github.com/inorganik/CountUp.js">Download on Github</a></h3>
        </section>
        <section>
            <p style="position:absolute; top:5px; left:0;">Current stars:</p>
            <h1 class="jumbo" id="myTargetElement">0</h1>
        </section>
        <section>
            <form>
                <h4 class="inlineLeft noMargin weight300">Params:</h4>
                <div class="inlineLeft marginLeft marginRight">
                    <input type="text" value="24.02" id="startVal" style="width:50px" onkeyup="updateCodeVisualizer()">
                    <label class="inlineLabel">Start</label>
                </div>
                <input type="button" class="inlineLeft marginRight" value="Swap" onClick="swapValues()" style="width:80px;">
                <div class="inlineLeft marginRight">
                    <input type="text" value="94.62" id="endVal" style="width:50px" onkeyup="updateCodeVisualizer()">
                    <label class="inlineLabel">End</label>
                </div>
                <div class="inlineLeft marginRight">
                    <input type="number" value="2" id="decimals" step="1" style="width:50px" onkeyup="updateCodeVisualizer()" onchange="updateCodeVisualizer()">
                    <label class="inlineLabel">Decimals</label>
                </div>
                <div class="inlineLeft marginRight">
                    <input type="number" value="2.5" id="duration" step=".1" style="width:50px" onkeyup="updateCodeVisualizer()" onchange="updateCodeVisualizer()">
                    <label class="inlineLabel">Duration</label>
                </div>
            </form>
        </section>
        <section>
            <form>
                <h4 class="inlineLeft noMargin weight300">Options:</h4>
                <div class="inlineLeft marginLeft marginRight">
                    <input type="checkbox" onClick="toggleEasing(this)" checked><label class="inlineLabel">Use easing</label>
                </div>
                <div class="inlineLeft marginRight">
                    <input type="checkbox" onClick="toggleGrouping(this)" checked><label class="inlineLabel">Use grouping</label>
                </div>
                <div class="inlineLeft marginRight">
                    <input type="text" value="," id="separator" style="width:15px; padding:0 5px;" onkeyup="updateCodeVisualizer()">
                    <label class="inlineLabel">Separator</label>
                </div>
                <div class="inlineLeft marginRight">
                    <input type="text" value="." id="decimal" style="width:15px; padding:0 5px;" onkeyup="updateCodeVisualizer()">
                    <label class="inlineLabel">Decimal</label>
                </div>
                <div class="inlineLeft marginRight">
                    <input type="text" value="" id="prefix" style="width:15px; padding:0 5px;" onkeyup="updateCodeVisualizer()">
                    <label class="inlineLabel">Prefix</label>
                </div>
                <div class="inlineLeft marginRight">
                    <input type="text" value="" id="suffix" style="width:15px; padding:0 5px;" onkeyup="updateCodeVisualizer()">
                    <label class="inlineLabel">Suffix</label>
                </div>
            </form>
        </section>
        <section>
            <form>
                <h4 class="inlineLeft noMargin weight300">Methods:</h4>
                <input type="button" value="Start" onClick="createCountUp()" class="inlineLeft marginLeft marginRight">
                <input type="button" value="Pause/Resume" onClick="showCodeAndPauseResume()" class="inlineLeft marginRight">
                <input type="button" value="Reset" onClick="showCodeAndReset()" class="inlineLeft marginRight">
                <input type="button" value="Update:" onClick="showCodeAndUpdate()" class="inlineLeft" style="margin-right:2px">
                <div class="inlineLeft marginRight">
                    <input type="text" value="6789" id="updateVal" style="width:50px" onkeyup="updateCodeVisualizerForUpdate()">
                </div>
                <input type="checkbox" onClick="toggleOnComplete(this)"><label class="inlineLabel">Alert on complete</label>
            </form>
        </section>
        <section class="marginBottom">
            <div class="col full marginBottom marginTop">
                <div class="code-contain marginBottom">
                    <code id="codeVisualizer" class="indigo">var options = {<br>
                        &emsp;&emsp;useEasing : true, <br>
                        &emsp;&emsp;useGrouping : true, <br>
                        &emsp;&emsp;separator : ',', <br>
                        &emsp;&emsp;decimal : '.' <br>
                        }<br>
                        var demo = new CountUp("myTargetElement", 24.02, 94.62, 0, 2, options);<br>
                        demo.start();
                    </code>
                </div>
            </div>
        </section>
    </div>

</body>
<script type="text/javascript">

    // set CountUp options
    // you don't need to do this - you can use the default options
    var useOnComplete = false,
        useEasing = true,
        useGrouping = true,
        options = {
            useEasing : useEasing, // toggle easing
            useGrouping : useGrouping, // 1,000,000 vs 1000000
            separator : ',', // character to use as a separator
            decimal : '.', // character to use as a decimal
        }

    var demo, code, data, stars;

    // create instance
    window.onload = function() {
        // setup CountUp object
        demo = new CountUp('myTargetElement', 0, 94.62, 2, 2.5, options);
        // you could do demo.start() right here but we are getting actual current star count from github api below
        // since it is an asynchronous call, we fire start() in the success fn of the XMLHttpRequest object
        getStars.send();

        // display version (no hassling with markup!)
        document.getElementById('version').innerHTML = 'v'+demo.version();
    }

    // for demo:
    function swapValues() {
        var oldStartVal = document.getElementById("startVal").value;
        var oldEndVal = document.getElementById("endVal").value;
        document.getElementById("startVal").value = oldEndVal;
        document.getElementById("endVal").value = oldStartVal;
        updateCodeVisualizer();
    }
    function createCountUp() {

        var startVal = document.getElementById("startVal").value;
        startVal = Number(startVal.replace(',','').replace(' ',''));
        var endVal = document.getElementById("endVal").value;
        endVal = Number(endVal.replace(',','').replace(' ',''));
        var decimals = document.getElementById("decimals").value,
            duration = document.getElementById("duration").value,
            prefix = document.getElementById("prefix").value,
            suffix = document.getElementById("suffix").value;

        options = {
            useEasing : useEasing,
            useGrouping : useGrouping,
            separator : document.getElementById("separator").value,
            decimal : document.getElementById("decimal").value,
            prefix: prefix,
            suffix: suffix
        }

        // you don't have to create a new instance of CountUp every time you start an animation,
        // you can just change the properties individually. But I do here in case user changes values in demo.
        demo = new CountUp("myTargetElement", startVal, endVal, decimals, duration, options);

        if (useOnComplete) {
            demo.start(methodToCallOnComplete);
        } else {
            demo.start();
        }

        updateCodeVisualizer();
    }
    function showCodeAndPauseResume() {
        code = 'demo.pauseResume();';
        document.getElementById("codeVisualizer").innerHTML = code;

        demo.pauseResume();
    }
    function showCodeAndReset() {
        code = 'demo.reset();';
        document.getElementById("codeVisualizer").innerHTML = code;

        demo.reset();
    }
    function showCodeAndUpdate() {
        var updateVal = document.getElementById("updateVal").value;
        var num = updateVal ? updateVal : 0;

        demo.update(num);
    }
    function toggleOnComplete(checkbox) {

        if (checkbox.checked) {
            useOnComplete = true;
        } else {
            useOnComplete = false;
        }
        updateCodeVisualizer();
    }
    function toggleEasing(checkbox) {

        if (checkbox.checked) {
            useEasing = true;
        } else {
            useEasing = false;
        }
        updateCodeVisualizer();
    }
    function toggleGrouping(checkbox) {

        if (checkbox.checked) {
            useGrouping = true;
        } else {
            useGrouping = false;
        }
        updateCodeVisualizer();
    }
    function methodToCallOnComplete() {
        console.log('COMPLETE!');
        alert('COMPLETE!');
    }
    function updateCodeVisualizer() {
        var startVal = document.getElementById("startVal").value;
        startVal = Number(startVal.replace(',','').replace(' ',''));
        var endVal = document.getElementById("endVal").value;
        endVal = Number(endVal.replace(',','').replace(' ',''));
        var decimals = document.getElementById("decimals").value;
        var duration = document.getElementById("duration").value;
        var separator = document.getElementById("separator").value;
        var decimal = document.getElementById("decimal").value;
        var prefix = document.getElementById("prefix").value;
        var suffix = document.getElementById("suffix").value;


        var code = 'var options = {<br>';
        code += (useEasing) ? '&emsp;&emsp;useEasing : true, <br>' : '&emsp;&emsp;useEasing : false, <br>';
        code += (useGrouping) ? '&emsp;&emsp;useGrouping : true, <br>' : '&emsp;&emsp;useGrouping : false, <br>';
        code += '&emsp;&emsp;separator : \''+separator+'\', <br>';
        code += '&emsp;&emsp;decimal : \''+decimal+'\', <br>';
        code += '&emsp;&emsp;prefix : \''+prefix+'\', <br>';
        code += '&emsp;&emsp;suffix : \''+suffix+'\' <br>';
        code += '};<br>';
        code += 'var demo = new CountUp("myTargetElement", '+startVal+', '+endVal+', '+decimals+', '+duration+', options);<br>';
        if (useOnComplete) {
            code += 'demo.start(methodToCallOnComplete);';
        } else {
            code += 'demo.start();';
        }
        document.getElementById("codeVisualizer").innerHTML = code;
    }
    function updateCodeVisualizerForUpdate() {
        var updateVal = document.getElementById("updateVal").value;
        var num = updateVal ? updateVal : 0;
        code = 'demo.update(' + updateVal + ');';
        document.getElementById("codeVisualizer").innerHTML = code;
    }

    // get current star count
    var repoInfoUrl = 'https://api.github.com/repos/inorganik/CountUp.js';
    var getStars = new XMLHttpRequest();
    getStars.open('GET', repoInfoUrl, true);
    getStars.timeout = 5000;

    getStars.onreadystatechange = function() {
        // 2: received headers,  3: loading, 4: done
        if (getStars.readyState == 4) {
            if (getStars.status == 200) {
                if (getStars.responseText !== 'undefined') {
                    if (getStars.responseText.length > 0) {
                        data = JSON.parse(getStars.responseText);
                        stars = data.stargazers_count;
                        // change input values
                        document.getElementById("startVal").value = 0;
                        document.getElementById("endVal").value = stars;
                        document.getElementById("decimals").value = 0;
                        // change code example values
                        updateCodeVisualizer();
                        // change the startVal and endVal properties of the demo CountUp and run it
                        demo.startVal = 0;
                        demo.endVal = stars;
                        demo.decimals = 0;
                        demo.start();
                    }
                }
            }
        }
    }
    getStars.onerror = function() {
        console.log('error: '+getStars.status)
        demo.start();
    }

    </script>
</html>
